<!DOCTYPE html>
<meta charset="utf-8">

<html>
  <head>
    <title>Minigo: demo</title>
    <link href="style.css" rel="stylesheet">
    <script type="text/javascript" src="socketio/socket.io.min.js"></script>
    <script data-main="demo" src="require/require.js"></script>
    <style>
      .minigui {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        width: 1720px;
        height: 900px;
        margin: auto;
        margin-top: 90px;
      }

      #main-board { width: 100%; height: 100%; }
      .main-board-pad { height: 900px; width: 900px; padding: 30px; }

      .button {
        font-size: 14px;
        border-radius: 6px;
        width: 105px;
        height: 40px;
      }

      #black-player { background-color: #222; color: #eee; }
      #white-player { background-color: #fff; color: #222; }
      #pass { background-color: #9c9389; color: #222; }
      #reset { background-color: #8c6845; color: #ffe; }

      .graph { width: 480px; height: 210px; }
      .log-container { width: 480px; height: 590px; }
      .log { height: 566px; font-size: 10px; }
      .console-wrapper { height: 24px; }
      .console-prompt { font-size: 10px; width: 16px; }
      #console { font-size: 10px; width: 464px; padding: 3px 0 3px 0; }
      #console:focus { outline: none; }
    </style>
  </head>
  <body>
    <div class="minigui"
         data-gtp-report_search_interval="50">
      <div class="main-board-pad board"><div id="main-board"></div></div>
      <div class="sp-30"></div>
      <div class="fs-0">
        <div id="search-board" class="board sq-280"></div>
        <div class="sp-30"></div>
        <div id="n-board" class="board sq-280"></div>
        <div class="sp-30"></div>
        <div id="dq-board" class="board sq-280"></div>
      </div>
      <div class="sp-30"></div>
      <div class="fs-0">
        <div class="fs-0">
          <div id="black-player" class="button">Human</div>
          <div class="sp-20"></div>
          <div id="white-player" class="button">Human</div>
          <div class="sp-20"></div>
          <div id="pass" class="grey button">Pass</div>
          <div class="sp-20"></div>
          <div id="reset" class="grey button">Reset</div>
        </div>
        <div class="sp-30"></div>
        <div id="winrate-graph" class="graph"></div>
        <div class="sp-30"></div>
        <div class="log-container">
          <div id="log" class="log"></div>
          <div class="console-wrapper">
            <div class="console-prompt">&gt;</div><div contenteditable id="console"></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
